<template>
    <div id="specMana">
        <div class="view-top">
            <span class="router-name">单位管理</span>
            <span class="add-info">
                <button @click="addInfo">添加单位</button>
            </span>
        </div>
        <div class="cont">
            <div class="common-cont">
                <div class="common-top">
                    <span class="left">单位名称</span>
                    <span class="right">操作</span>
                </div>
                <ul class="common-list">
                    <li v-for="(item,index) in specsList" :key="index">
                        <span class="common-name">{{item.name}}</span>
                        <div class="modify right">
                            <span @click="modifySpec(item)">修改</span>
                            <span @click="delSpec(item)">删除</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <el-dialog
            :title="titInfo"
            :visible.sync="showAddInfo"
            width="30%">
            <el-input v-model="specInfo.specName" placeholder="请输入单位名字"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showAddInfo = false">取 消</el-button>
                <el-button type="primary" @click="addType">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {BASE_URL} from "./../../../../urlConfig";
export default {
    data(){
        return{
            showAddInfo: false,
            titInfo:"",
            specInfo:{
                id:0,
                specName:""
            },
            specsList:[]
        }
    },
    methods:{
        addInfo(){
            this.titInfo = "添加单位"
            this.showAddInfo = true;
            this.specInfo = {
                id:0,
                typeName:""
            };
        },
        addType(){
            if(!this.specInfo.specName){
                this.$message({
                    message: "单位名不允许为空",
                    type: "error"
                });
                return;
            }
            this.$http({
                url:BASE_URL+"v1/stock/spec-merge",
                method:"GET",
                params:{
                    id:this.specInfo.id,
                    name:this.specInfo.specName
                }
            }).then(res=>{
                this.$message({
                    message: "操作成功",
                    type: "success"
                });
                this.showAddInfo = false;
                this.getSpecs();
            })
        },
        modifySpec(item){
            this.specInfo = {
                id:item.id,
                specName:item.name,
            }
            this.titInfo = "修改单位"
            this.showAddInfo = true;
        },
        delSpec(item){
            this.$http({
                url:BASE_URL+"v1/stock/spec-remove",
                method:"GET",
                params:{
                   id:item.id
                }
            }).then(res=>{
                this.$message({
                    message: "操作成功",
                    type: "success"
                });
                this.getSpecs();
            })
        },
        getSpecs(){
            this.$http({
                url:BASE_URL+"v1/stock/spec-list",
                method:"GET",
                params:{
                    
                }
            }).then(res=>{
                this.specsList = res.data;
            })
        }
    },
    mounted(){
        this.getSpecs();
    }
}
</script>

<style lang="scss">
@import "./specMana.scss";
</style>
